class RoundRect {
    
    // // x, y 为左上角的位置 r 为圆角半径
    // // w, h 为边界宽高
    constructor(x, y, w, h, r, fill = "#ffff00", stroke = "#0000ff") {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.r = r;
        this.fillStyle = fill;
        this.strokeStyle = stroke;
    }
    draw(ctx) {
        let { x, y, w, h, r } = this;

        // 四个顶点
        // 0-----1
        // |     |
        // 3-----2
        let x0 = x;
        let y0 = y;

        let x1 = x + w;
        let y1 = y;

        let x2 = x1;
        let y2 = y + h;

        let x3 = x;
        let y3 = y2;

        ctx.save();
        ctx.strokeStyle = this.strokeStyle;
        ctx.fillStyle = this.fillStyle;
        ctx.beginPath();
        ctx.moveTo(x0 + r, y0);
        ctx.arcTo(x1, y1, x2, y2, r);
        ctx.arcTo(x2, y2, x3, y3, r);
        ctx.arcTo(x3, y3, x0, y0, r);
        ctx.arcTo(x0, y0, x1, y1, r);
        ctx.fill();
        ctx.stroke();
        ctx.restore();
    }
}